<template>
  <div class="v-zkll">
    <Row :gutter="20">
        <Col span="6">
            <div class="v-top-banner v-top-banner1">
            	<p>总客流量（进店/店外/人）</p>
                <h2>{{topTotalData.enterStore}}/{{topTotalData.outStore}}</h2>
            	<img src="../assets/bg_top1.png" width="113" height="103">
        	</div>
        </Col>
        <Col span="6">
            <div class="v-top-banner v-top-banner2">
                <img src="../assets/bg_top2.png" width="113" height="103">
                <p>人气最佳：{{topTotalData.areaName}}（人）</p>
                <h2>{{topTotalData.enters}}</h2>
            </div>
        </Col>
        <Col span="6">
            <div class="v-top-banner v-top-banner8">
                <p>到店年龄最多（岁）</p>
                <h2>{{ageMaxMen}}</h2>
                <img src="../assets/bg_top8.png" width="113" height="103">
            </div>
        </Col>
        <Col span="6">
            <div class="v-top-banner v-top-banner3">
                <p>到店性别最多</p>
                <h2>
                    <template v-if="topTotalData.males > topTotalData.females">男性{{parseInt(topTotalData.males / (topTotalData.females + topTotalData.males) * 100)}}%</template>
                    <template v-else>女性{{parseInt(topTotalData.females / (topTotalData.females + topTotalData.males) * 100)}}%</template>
                </h2>
                <img src="../assets/bg_top3.png" width="113" height="103">
            </div>
        </Col>
    </Row>
    <Card :bordered="false" class="mt28">
        <p slot="title">首页</p>
        <div id="chartMDKL"></div>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');

export default {
  name: "v-zkll",
  components: {
  },
  props: {
  },
  data () {
    return {
        topTotalData: {},
        enterTotles: [],
        ageMaxMen: '0-18',
        censusArr: [],
        myChart: null
    }
  },
  mounted () {
  },
  computed: {
    ...mapState({
        sideBarWidth: state => state.sideBarWidth,
        getAjaxParams: state => state.timeParams
    })
  },
  watch: {
    getAjaxParams(val) {
        this.PassengerData(val)
        this.$store.dispatch('SetDownLink', val)
    },
    sideBarWidth (val) {
        setTimeout(() => {
            this.myChart.resize()
        }, 200)
    }
  },
  created () {
    this.$store.dispatch('SetDownLink', this.getAjaxParams)
    this.PassengerData(this.getAjaxParams)
  },
  methods: {
    sequence (a, b) {
        if (a>b) {
            return 1
        } else if(a<b) {
            return -1
        } else {
            return 0
        }
    },
    PassengerData (params) {
        this.$store.dispatch('SpinShow', true)
        this.$store.dispatch('PassengerData', params).then((res) => {
            if (res.success === '1') {
                this.$store.dispatch('SpinShow', false)
                this.censusArr = res.census
                this.topTotalData = res.topTotalData[0]
                this.ageArr = [this.topTotalData.age1, this.topTotalData.age2, this.topTotalData.age3, this.topTotalData.age4, this.topTotalData.age5]
                this.ageArr.forEach((i, index) => {
                    if (Math.max(this.topTotalData.age1, this.topTotalData.age2, this.topTotalData.age3, this.topTotalData.age4, this.topTotalData.age5) === i) {
                        switch(index) {
                            case 0:
                               this.ageMaxMen = '0-18'
                               break;
                            case 1:
                               this.ageMaxMen = '19-30'
                               break;
                            case 2:
                               this.ageMaxMen = '31-40'
                               break;
                            case 3:
                               this.ageMaxMen = '41-50'
                               break;
                            case 4:
                               this.ageMaxMen = '51及以上'
                               break;
                            default:
                        }
                    }
                })
                this.enterTotles = res.enterTotles
                let xAxisData = []
                let legendData = []
                let series = []
                xAxisData = Object.keys(this.enterTotles[0]).sort()
                let xAxisDataLen = xAxisData.length
                for (let i in this.enterTotles) {
                    let _data = []
                    let _areaName = ''
                    for(var k = 0; k < xAxisData.length; k++) {
                        if (xAxisData[k].indexOf('-') === -1) {  // 今天 昨天
                            xAxisData = Object.keys(this.enterTotles[0]).sort((a, b) => {
                                return a - b
                            })
                            for (var j in this.enterTotles[i]) {
                                this.enterTotles[i][j].hour = String(this.enterTotles[i][j].hour)
                                if (xAxisData[k] === this.enterTotles[i][j].hour) {
                                    legendData.push(this.enterTotles[i][j].areaName)
                                    _areaName = this.enterTotles[i][j].areaName
                                    _data.push(this.enterTotles[i][j].enters)
                                }
                            }
                        } else {
                            for (var j in this.enterTotles[i]) {
                                if (xAxisData[k] === j) {
                                    legendData.push(this.enterTotles[i][j].areaName)
                                    _areaName = this.enterTotles[i][j].areaName
                                    _data.push(this.enterTotles[i][j].enters)
                                }
                            }
                        }
                    }
                    series.push({
                        type: 'line',
                        showSymbol: true,
                        symbol: 'circle',
                        symbolSize: 3,
                        name: _areaName,
                        data: _data
                    })
                }
                legendData = [...new Set(legendData)]
                this.$nextTick(() => {
                    this.drawChartLine('chartMDKL', legendData, xAxisData, series)
                })
            }
        })
    },
    drawChartLine (id, legendData, xAxisData, series) {
        this.myChart = echarts.init(document.getElementById(id))
        this.myChart.setOption({
            color: ['#f14c79', '#65d9d7', '#b7c87d', '#926ff4', '#ffa251', '#16a4fd', '#86a8f1', '#ffc978'],
            title : {
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                bottom: 10,
                data: legendData
            },
            grid: {
                left: '60px',
                top: '10px',
                right: '20px',
                bottom: '126px'
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#999'
                  }
                },
                axisTick: {
                  show: true,
                  alignWithLabel: true
                },
                data: xAxisData
            },
            yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f0f0f0'
                  }
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#999'
                  }
                },
                axisTick: {
                  show: false
                }
            },
            series: series
        }, true);

        setTimeout(() => {
            window.onresize = this.myChart.resize
        }, 200)
    }
  }
};
</script>

<style lang="less">
    .v-zkll {
        .ivu-card-head p, .ivu-card-head-inner {
            height: 32px;
            line-height: 32px;
            font-size: 24px;
        }
        .ivu-card-head {
            padding: 30px 20px;
            border-bottom: none;
        }
    }
	.v-top-banner {
		position: relative;
		width: 100%;
		height: 96px;
        padding: 12px 0;
		border-radius: 6px;
        color: #fff;
		overflow: hidden;
        p {
            margin: 0 20px;
            font-size: 14px;
            position: relative;
        }
        h2 {
            margin: 0 20px;
            font-weight: normal;
            font-size: 24px;
            span {
                font-size: 16px;
            }
        }
		img {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
    .v-top-banner1 {
        background: -webkit-linear-gradient(left, #ff9549, #ffc569);
        background: -o-linear-gradient(right, #ff9549, #ffc569);
        background: -moz-linear-gradient(right, #ff9549, #ffc569);
        background: linear-gradient(to right, #ff9549, #ffc569);
    }
    .v-top-banner2 {
        background: -webkit-linear-gradient(left, #2496fc, #21bdfc);
        background: -o-linear-gradient(right, #2496fc, #21bdfc);
        background: -moz-linear-gradient(right, #2496fc, #21bdfc);
        background: linear-gradient(to right, #2496fc, #21bdfc);
    }
    .v-top-banner3 {
        background: -webkit-linear-gradient(left, #49c7b3, #63dbd0);
        background: -o-linear-gradient(right, #49c7b3, #63dbd0);
        background: -moz-linear-gradient(right, #49c7b3, #63dbd0);
        background: linear-gradient(to right, #49c7b3, #63dbd0);
    }
    .v-top-banner4 {
        background: -webkit-linear-gradient(left, #f14b78, #eb5a8a);
        background: -o-linear-gradient(right, #f14b78, #eb5a8a);
        background: -moz-linear-gradient(right, #f14b78, #eb5a8a);
        background: linear-gradient(to right, #f14b78, #eb5a8a);
    }
    .v-top-banner8 {
        background: -webkit-linear-gradient(left, #8e6ff3, #c86ef4);
        background: -o-linear-gradient(right, #8e6ff3, #c86ef4);
        background: -moz-linear-gradient(right, #8e6ff3, #c86ef4);
        background: linear-gradient(to right, #8e6ff3, #c86ef4);
    }
    #chartMDKL {
        width: 100%;
        height: 522px;
    }
</style>
